<script setup lang='ts'>
import BaseLoading from '~/components/BaseLoading.vue';
import { usePopupSelect } from '~/composables/usePopupSelect';
import CasinoMyBet from './components/CasinoMyBet.vue';
import SportMyBet from './components/SportMyBet.vue';

const { t } = useI18n()
const { currentGlobalCurrency } = storeToRefs(useAppStore())

const selectedCategory = ref('1')
const selectedTime = ref('1')
const selectedResult = ref('0')

const categoryList = [
    { label: $t('娱乐城'), value: '1' },
    { label: $t('体育'), value: '2' },
]
const timeList = [
    { label: $t('今日'), value: '1' },
    { label: $t('本周'), value: '2' },
    { label: $t('本月'), value: '3' },
]

const resultList = [
    { label: $t('未结算'), value: '0' },
    { label: $t('已结算'), value: '1' },
]

const { openPopupSelect: openPopupSelectCategoryList, closePopupSelect: closePopupSelectCategoryList } = usePopupSelect(t('选择类型'), categoryList, selectedCategory, selectCategoryListCB)
const { openPopupSelect: openPopupSelectTimeList, closePopupSelect: closePopupSelectTimeList } = usePopupSelect(t('选择时间'), timeList, selectedTime, selectTimeListListCB)
const { openPopupSelect: openPopupSelectResultList, closePopupSelect: closePopupSelectResultList } = usePopupSelect(t('结算情况'), resultList, selectedResult, selectResultListListCB)

const selectedCategoryLabel = computed(() => categoryList.find(item => item.value === selectedCategory.value)?.label ?? '')
const selectedTimeListLabel = computed(() => timeList.find(item => item.value === selectedTime.value)?.label ?? '')
const selectedResulistLabel = computed(() => resultList.find(item => item.value === selectedResult.value)?.label ?? '')


function selectCategoryListCB(active: string) {
    selectedCategory.value = active
    closePopupSelectCategoryList()
}
function selectTimeListListCB(active: string) {
    selectedTime.value = active
    closePopupSelectTimeList()
}
function selectResultListListCB(active: string) {
    selectedResult.value = active
    closePopupSelectResultList()
}

/** 开始时间 */
const startTime = computed(() => {
    if (selectedTime.value === '1')
        return getTodayTimeRange().start
    if (selectedTime.value === '2')
        return getCurrentWeekTimeRange().start
    if (selectedTime.value === '3')
        return getCurrentMonthTimeRange().start
    return 0
})
/** 结束时间 */
const endTime = computed(() => {
    if (selectedTime.value === '1')
        return getTodayTimeRange().end
    if (selectedTime.value === '2')
        return getCurrentWeekTimeRange().end
    if (selectedTime.value === '3')
        return getCurrentMonthTimeRange().end
    return 0
})

//CasinoData
const {
    list: casinoBetList, prev: casinoPrev, next: casinoNext, total: casinoTotal, page: casinoPage, runAsync: runAsyncCasino, page_size: casinoPage_size, loading: casinoLoading,
} = useList(ApiMemberUserBetList, {}, { page_size: 10 })

//SportData
const {
    list: sportBetList, prev: sportPrev, next: sportNext, total: sportTotal, page: sportPage, runAsync: runAsyncSport, page_size: sportPage_size, loading: sportLoading,
} = useList(ApiSportBetListByTime, {}, { page_size: 10 })




watch([selectedCategory, selectedTime, selectedResult], () => {
    if (selectedCategory.value === '1') {
        runAsyncCasino({ start_time: startTime.value * 1000, end_time: endTime.value * 1000 })
    } else {
        runAsyncSport({ start_time: startTime.value, end_time: endTime.value, settle: selectedResult.value, cur: getCurrencyConfig(currentGlobalCurrency.value)?.cur })
    }
}, { immediate: true })

</script>

<template>
    <div class=" text-white p-4">
        <div class="space-y-4">
            <div class="w-full bg-[#292D2E] px-3 py-2.5 rounded-[4px] flex justify-between items-center border border-[#3A4142] font-bold"
                @click="openPopupSelectCategoryList">
                <span>{{ selectedCategoryLabel }}</span>
                <div class="bg-[#3A4142] w-5 h-5 rounded-[6px] flex justify-center items-center">
                    <BaseIcon name="uni-arrow-down" />
                </div>
            </div>
            <div class="flex">
                <div
                    class="w-full bg-[#292D2E] px-3 py-2.5 rounded-[4px] flex justify-between items-center  border border-[#3A4142] font-bold flex-1"
                    @click="openPopupSelectTimeList">
                    <span>{{ selectedTimeListLabel }}</span>
                    <div class="bg-[#3A4142] w-5 h-5 rounded-[6px] flex justify-center items-center">
                        <BaseIcon name="uni-arrow-down" />
                    </div>
                </div>
                <div v-show="selectedCategory === '2'"
                    class="w-full bg-[#292D2E] px-3 py-2.5 rounded-[4px] flex justify-between items-center  border border-[#3A4142] font-bold flex-1 ml-4"
                    @click="openPopupSelectResultList">
                    <span>{{ selectedResulistLabel }}</span>
                    <div class="bg-[#3A4142] w-5 h-5 rounded-[6px] flex justify-center items-center">
                        <BaseIcon name="uni-arrow-down" />
                    </div>
                </div>
            </div>
        </div>
        <div v-if="casinoLoading || sportLoading" class="flex h-72 justify-center items-center">
            <BaseLoading style="--tg-base-loading-size:20px;" />
        </div>
        <CasinoMyBet v-else-if="selectedCategory === '1' && casinoBetList?.length !== 0" :list="casinoBetList" />
        <SportMyBet v-else-if="selectedCategory === '2' && sportBetList?.length !== 0" :list="sportBetList" />

        <!-- 暂无资料 -->
        <div v-else class="flex flex-col items-center justify-center mt-16 text-center text-gray-400">
            <BaseIcon name="bet-no-date" class="text-[9rem] mb-2" />
            <p class="mb-2">暂时还没有资料</p>
            <strong class="text-white">立即开始存款！</strong>
        </div>
    </div>
</template>


<style lang='scss' scoped></style>